<template>
    <div>
        <el-form :inline="true">
            <div style="display: flex; justify-content: space-between;">
                <div>
                    <el-form-item>
                        <el-date-picker v-model="month" type="month" value-format="yyyyMM" placeholder="选择月">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="init">查询</el-button>
                    </el-form-item>
                </div>
            </div>
        </el-form>

        <!-- 列表数据 -->
        <el-table v-loading="listLoading" :data="tableData" border style="width: 100%">
            <el-table-column prop="month" label="日期" align="center" />
            <el-table-column prop="amtSelf" label="总业绩" align="center" />
            <el-table-column prop="amtO1" label="调解服务" align="center" />
            <el-table-column prop="amtO2" label="签约服务商" align="center" />
            <el-table-column prop="amtO3" label="结清服务" align="center" />
            <el-table-column prop="bonusTotal" label="累计分红[分公司]" align="center" />
            <el-table-column prop="bonusTotalT10" label="累计额外分红[前十家分公司]" align="center" />
            <el-table-column prop="compayCount" label="分公司数量" align="center" />
            <el-table-column prop="compayRate" label="分公司平均分红" align="center" />
            <el-table-column prop="compayCount10" label="前十家分公司数量" align="center" />
            <el-table-column prop="compayRate10" label="前10分公司平均分红[额外]" align="center" />
            <!-- <el-table-column label="操作" width="200" align="center">
                <template slot-scope="{ row }">
                    <el-button size="mini" type="primary" @click="setUserLevel(row)">编辑</el-button>
                </template>
</el-table-column> -->
        </el-table>
        <div class="block " style="padding-top: 20px;">
            <el-pagination background :current-page="pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
                @size-change="idx => { pageSize = idx }" @current-change="idx => { pageIndex = idx }" />
        </div>

        <!-- 设置等级 -->
        <!-- <digsetuserLevel v-if="modalStatus == 1" :info="currentInfo" /> -->

    </div>
</template>

<script>
import { totalMonth } from '@/api/trade.js'
// import digsetuserLevel from './components/digSetUserLevel.vue'
export default {
    name: 'Name',
    // components: { digsetuserLevel },
    data() {
        return {
            month: '',

            listLoading: false,
            tableData: [],
            totalCount: 0,
            pageIndex: 1,
            pageSize: 10,

            modalStatus: 0, // 打开组件弹窗参数
            currentInfo: {}, // 当前用户信息
        }
    },
    watch: {
        pageIndex(val) {
            console.log(val);
            this.getData();
        },
        pageSize(val) {
            this.getData()
        },
        modalStatus(val) {
            this.getData()
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        init() {
            this.pageIndex = 1
            this.getData();
        },
        /**打开设置等级弹窗 */
        setUserLevel(info = {}) {
            this.currentInfo = info;
            this.modalStatus = 1;
        },
        /**获取主列表 */
        async getData() {
            this.listLoading = true;
            const { list, pageIndex, totalCount } = await totalMonth({
                month: this.month,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            });
            this.totalCount = totalCount;
            this.tableData = list;
            this.listLoading = false;
        }
    }
}
</script>
<style lang="scss"></style>